<template>
  <a 
    :class="{'gray': disabled, 'sendbtn': true}" 
    @click="getCode"
  >
    {{btntxt}}
  </a>
</template>

<script>
export default {
  name: 'SendCode',
  props: {},
  data(){
    return {
      btntxt: "获取验证码",
			disabled: false,
			time: 0
    }
  },
  methods: {
    getCode(){
      if(!this.disabled){
        this.$emit('btnclick')
      }
    },
    count(){
      this.time = 120
      this.disabled = true
      this.timer()
    },
    //验证码的倒计时
    timer() {
      if (this.time > 0) {
        this.time--
        this.btntxt = this.time + "s后获取"
        setTimeout(this.timer, 1000)
      } else {
        this.time = 0
        this.btntxt = "获取验证码"
        this.disabled = false
      }
    },
  },
}
</script>

<style scope>
a.sendbtn{
  position: absolute;
  right: 0;
  top: 5px;
  display: inline-block;
  width: 108px;
  line-height: 40px;
  border-radius: 40px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  background-color: #222;
}
a.sendbtn.gray{
  color: #ccc;
  background-color: #eee;
}
</style>